import { MessageBox } from '@/utils/messageBox'
import { RunBack, UpscaleModel } from '@/lib/imageUpscale/types'
export const runBackList = [
  RunBack.cpu,
  RunBack.wasm,
  RunBack.webgl,
  RunBack.webgpu,
]
export const modelDetails = {
  [UpscaleModel.waifu_2x_scale]: {
    name: '动漫-放大 x2 -微调',
    explain:
      '适用于二次元图片，如动漫、头像等,支持放大2倍，有噪点时先使用waifu_2x_noise进行去噪',
    link: 'https://github.com/nagadomi/waifu2x',
  },
  [UpscaleModel.waifu_2x_noise]: {
    name: '动漫-去噪-微调',
    explain:
      '适用于二次元图片，如动漫、头像等,支持去噪,和waifu_2x_scale配合使用',
    link: 'https://github.com/nagadomi/waifu2x',
  },
  [UpscaleModel.RealESRGANAnimModel]: {
    name: '动漫-去噪-放大 x4',
    explain: '适用于二次元图片，如动漫、头像等',
    link: 'https://github.com/xinntao/Real-ESRGAN',
  },
  [UpscaleModel.RealESRGANModel]: {
    name: '通用-去噪-放大 x4',
    explain: '适用于所有图片，如风景、人物等',
    link: 'https://github.com/xinntao/Real-ESRGAN',
  },
}
/**
 * 解释模型
 */
export const explainModel = (model: UpscaleModel) => {
  const content = () => {
    return (
      <div className="model-explain">
        <p>{modelDetails[model].explain}</p>
        <a
          target="_blank"
          style={{ color: 'rgb(120 127 235)' }}
          href={modelDetails[model].link}>
          github地址点击跳转
        </a>
      </div>
    )
  }
  MessageBox.info('模型介绍', content)
}

export const explainBlockSize = () => {
  MessageBox.info(
    '推理分块大小',
    `将一张图片分割成多个分块进行批次推理，分块大小会影响推理速度
注意：分块过大可能导致内存溢出，即使不溢出也可能会因为虚拟内存分页导致性能过慢`
  )
}
export const explainRunBack = () => {
  MessageBox.info(
    '运行驱动',
    `运行效率，cpu < wasm < webgl < webgpu
效率比例，cpu：1，wasm：2，webgl：40，webgpu：80
形象的比喻效率，cpu==走路，wasm==跑步，webgl==坐汽车，webgpu==坐高铁`
  )
}
export const explainCompressionRatio = () => {
  MessageBox.info(
    '压缩质量',
    `在尽可能在肉眼无法感知的情况下压缩质量,实现减小文件占用空间的效果，质量为1则不压缩`
  )
}
export const verificationImageFile = (image: File) => {
  if (image.size == 0) {
    return false
  }
  const ends = [
    'png',
    'jpg',
    'jpeg',
    'pjpeg',
    'avif',
    'tif',
    'jfif',
    'xbm',
    'webp',
    'bmp',
    'gif',
    'svg',
    'ico',
    // 'heic',
    // 'heif',
  ]
  const flag = ends.findIndex((end) =>
    image.name.toLowerCase().endsWith(`.${end}`)
  )
  return flag !== -1
}

/**
 * 去除后缀名
 * @param image
 */
export const getImageName = (allName: string) => {
  const index = allName.lastIndexOf('.')
  return allName.slice(0, index)
}

export const faqData: {
  type: string
  list: {
    problem: string
    answers: string[]
  }[]
}[] = [
  {
    type: '普通用户',
    list: [
      {
        problem: '什么样的图片效果最佳？',
        answers: [
          '动漫、插画图片效果最佳',
          '图片尺寸不要过大',
          '图片不要太过模糊，否则放大后效果会很差',
        ],
      },
      {
        problem: '放大速度如何？',
        answers: [
          '主要看设备性能，和选择的运行驱动',
          '电脑>手机，webgl>webgpu>wasm>cpu',
          'android无法完全压榨掉设备的硬件性能，所以速度一般',
          'ios...没具体调试过',
        ],
      },
      {
        problem: '如何使用？',
        answers: ['上传图片', '选择模型', '点击放大'],
      },
      {
        problem: '开始放大以后需要一直保持浏览器打开吗？',
        answers: [
          '是的，因为本网站是将图片的算法运行到本地，如果是手机设备尽量保持浏览器打开并保持在当前页面，否则可能会导致运行中断',
        ],
      },
      {
        problem: '放大原理是什么？',
        answers: [
          '使用最新人工智能深度学习技术——深度卷积神经网络。',
          '可以将噪点和锯齿的部分进行补充，实现图片的无损放大。',
          '地址：https://github.com/xinntao/Real-ESRGAN',
          '地址：https://github.com/nagadomi/waifu2x',
        ],
      },

      {
        problem: '运行时为什么有时会卡顿？',
        answers: [
          '本网站是将图片的算法运行到本地，无需服务器计算',
          '因为是使用深度卷积神经网络技术，运算需要大量的计算资源，所以可能导致运行时卡顿',
          '其他网站是将图片上传到服务器进行放大，放大后在下载回来',
          'webgl和webgpu在手机设备运行很容易导致卡顿，甚至黑屏闪动（属于正常现象）',
        ],
      },
      {
        problem: '运行时突然黑屏后显示报错信息，怎么办？',
        answers: [
          '可能是内存溢出，请刷新页面，再尝试将分块尺寸调小，或者更换运行驱动',
        ],
      },

      {
        problem: `出现异常:RangeError: Failed to execute 'createBuffer' on 'GPUDevice': createBuffer failed... 如何解决?`,
        answers: [
          '这是webgpu驱动的bug，出现了内存泄漏导致内存不足，刷新页面程序会自动修复',
        ],
      },
      {
        problem: '我上传的图片会怎么处理呢？',
        answers: [
          '请放心，本网站不会将您的图片上传到服务器，上传的图片只会在本地进行放大处理。',
        ],
      },
    ],
  },
  {
    type: '我是懂哥',
    list: [
      {
        problem: '这个网站的图片放大模型是？',
        answers: [
          'waifu2x',
          'Real-ESRGAN',
          'waifu2x和Real-ESRGAN是两个不同的模型，但是可以配合使用',
        ],
      },
      {
        problem: '每个模型的特点是什么？',
        answers: [
          'waifu_2x_scale、waifu_2x_noise:使用7成卷积结构，推理速度快，放大2x，对弱噪点的图片效果好',
          'RealESRGANAnimModel:使用了6B的RRDBNet卷积结构，推理速度一般，放大4x，对动漫图片效果好',
          'RealESRGANModel:使用了23B的RRDBNet卷积结构，参数过于庞大，推理速度较慢，放大4x，适用于所有图片',
          '总结：waifu调整幅度小，放大后与原图区别不会过大，RealESRGAN调整幅度大，放大后与原图区别大',
        ],
      },
      {
        problem: '推理分块大小具体如何设置？',
        answers: [
          '在运行驱动是webgl的尽量设置在72以下，因为webgl驱动非常容易OOM',
          '其他运行驱动都可以拉高，可以加快推理速度，但是图片过大是也会导致OOM，图片过大时尽量调小分块大小',
        ],
      },
      {
        problem: '如何选择运行驱动？',
        answers: [
          'webgpu>webgl>wasm>cpu',
          'cpu：是通过js单线程脚本来计算，速度最慢',
          'wasm：是通过调用二进制程序让cpu来计算，但是由于是单线程，速度也快不了多少',
          'webgl：是通过调用GPU进行多线程计算，但是因为每次计算前还需要过多CPU的同步操作，所以速度一般',
          'wegpu：也通过调用GPU进行多线程计算，wegpu是直接调用GPU的底层API，所以速度最快，但是缺点是支持率还太差，最新的谷歌浏览器和火狐浏览器是支持的',
        ],
      },
      {
        problem: '推理速度和python推理速度有差距吗？',
        answers: [
          '在浏览器运行的速度比python推理速度慢',
          '因为python是有更适合神经网络的底层库，比如cuda、cudnn更直接的操作GPU等，而浏览器是通过webgl或webgpu来间接操作GPU',
          '不过我们不是训练模型，只是推理，所以速度慢一点问题不大',
        ],
      },
      {
        problem: '为什么使用浏览器来运行模型？',
        answers: [
          '在我之前，没有看到过多浏览器来运行模型的项目，在可能这一条全新的全新的赛道',
          '如果用户多的话，服务器负载严重',
          '即使是使用服务器来运行模型，效果可能也比不上bigjpg.com这样的网站',
          '服务器需要烧钱,其他类似的网站都是公司单位，有足够的资金来烧,但是本站属于个人网站，没有足够的资金来烧',
          '浏览器是距离用户体检最近的地方，性价比最高',
        ],
      },
      {
        problem: '其他网站为什么不使用浏览器来运行模型？',
        answers: [
          '其他网站大多都是公司组织需要盈利，浏览器环境是很容易受到爬虫的侵害，公司团队辛辛苦苦开发的可不想被别人白嫖',
          '可能其他人认为只要python才能搞神经网络或人工智能。',
          '可能是没人觉得前端可以搞神经网络或人工智能，都觉得“前端只是个切图仔，前端技术栈太简单了。”',
          `之所以这么想，我觉得因为各种大佬实现的框架。因为这些大佬让前端变得高级起来了，但也让各种人都可以触摸到前端，后面反而变得更廉价了。`,
        ],
      },
      {
        problem: '会不会担心网站技术被抄袭？',
        answers: [
          '不会，因为本站属于个人网站，没有盈利需求，所以不会对技术进行保密',
          '如果真的有人愿意来抄袭，就代表这个网站已经成功了',
          '其实更担心的应该是其他的收费网站，我这完全免费的葵花宝典，他们拿我没办法',
        ],
      },
      {
        problem: '这是怎然的开发历程？',
        answers: [
          '事实上这些卷积神经网络模型也不是我训练出来的，但是我把这些模型移植到了浏览器，让更多的人可以体验到这些技术。',
          '可能有人说我只是调库侠了，事实上调这个库也不是怎么容易。',
          '最开始我也只是一个用户，发现bigjpg.com好用，不需要VIP也不强制登录就可以免费放大图片。我就对其进行了网站进行了研究。',
          '因为bigjpg.com介绍说了使用了深度神经学习技术-卷积神经网络，我就去B站恶补了神经网络',
          '之后发现了waifu2x,我就之后我尝试将waifu2x的模型移植到浏览器，走了很多弯路',
          `我后面又在github上找到了waifu2x-js,这是一个十年前的项目，我看源码没有使用任何机器学习的框架。
大佬全把Relu，Conv2D等函数自己全部实现了。后面我成功了解到了waifu2x推理过程
之后我就移植成功了，但是我发现和bigjpg.com的效果差距很大`,
          `后面去有发现了RealESRGAN，为了移植到js，我又走了不少弯路。
想着模型格式torch——>onnx——>tensloflow——>tfjs，过程总是出问题,版本不兼容，后面又是运行后报错`,
          '只好使用最笨的方法，去看RealESRGAN的模型结构自己实现一编，最后终于移植成功了',
          '最后是想办法让模型文件压缩的更小，并且可以使用js解析，将（pth->python dict ->json->msgpack binary）',
        ],
      },
    ],
  },
  {
    type: '关于',
    list: [
      {
        problem: '这个网站主要优势是什么？',
        answers: [
          '本网站属于个人网站，无需VIP，免费使用，使用的模型都已开源，无需担心版权问题',
          '使用tensorflow.js，将模型运行到本地，无需为服务器的压力而担忧',
          '现代的用户设备，运行速度已经非常快，无需担心速度问题，一般都比其他站点通过服务器运行的快',
          '本地运行只需要下载模型文件，下载后会缓存到IndexDB，无需担心流量问题',
          '实现快速便捷的图片超分辨本地运行环境，如果用户自己动手在电脑部署，可能需要花费大量时间，本网站已经帮用户实现好了',
        ],
      },
      {
        problem: '这个网站使用的技术栈是？',
        answers: [
          'tensorflow.js',
          'webworker',
          'react',
          'typescript',
          'msgpack',
        ],
      },
      {
        problem: '如何联系作者？',
        answers: [
          '作者: WEI',
          '微信: a2016645682',
          '邮箱: 2016645682@qq.com',
          '烦请表明来意',
        ],
      },
    ],
  },
]
export const saveTypes = ['png', 'jpeg', 'webp'] as const
